<template>
    <el-drawer title="我是标题" :visible.sync="dialogVisible" :destroy-on-close="true" @opened="opensData" :with-header="false" class="demand_box" size='960px' @close="closeData">
        <div class="flexbox flexcolumn height_100">
            <div class="demand_head flexbox flexcenter flexbetween">
                <div class="flexbox flexcenter">
                    <div class="ana_img">
                        <img :src="baseInfo.material+'&x-oss-process=video/snapshot,t_0,f_jpg'" alt="" class="logo_img">
                        <div class="ana_type" :class="[baseInfo.material_type==1?'ana_type_blue':'ana_type_green']">{{baseInfo.material_type==1?'自制':'外部'}}</div>
                    </div>
                    <div class="ana_info">
                        <div class="ana_name">{{baseInfo.material_name}}</div>
                        <div class="flexbox flexcenter ana_base">
                            <div class="ana_time">素材ID：{{baseInfo.material_id}}</div>
                            <div class="ana_time">时长：{{secondToTimeStr(baseInfo.duration)}}</div>
                            <div class="ana_time">创建时间：{{baseInfo.create_time}}</div>
                        </div>
                    </div>
                </div>
                <span class="icon_btn icon_btn_32" @click="closeData"><img src="@/assets/img/close_check.svg" alt=""></span>
            </div>
            <div class="demand_center flex">
                <div class="heder_box flexbox flexcenter flexbetween">
                    <div>广告数据</div>
                    <div class="flexbox flexcenter">
                        <div class="close_btn first_text" @click="dialogVisibleSumbit = true,current = 'all'" v-if="tableData.length > 0">全部关停</div>
                            <el-date-picker style="width:216px;margin-left:12px" value-format="yyyy-MM-dd" :clearable="false" v-model="date" type="daterange" size="small" @change="getTableList()" range-separator="-" start-placeholder="开始日期" end-placeholder="结束日期">
                        </el-date-picker>
                        <el-select v-model="AccountId" @change="getTableList()" style="width:240px;margin-left:12px" placeholder="请选择" size="small">
                            <el-option
                            v-for="item in AccountList"
                            :key="item.advertiser_id"
                            :label="`广告主：`+ item.advertiser_id"
                            :value="item.advertiser_id">
                            </el-option>
                        </el-select>
                    </div>
                </div>
                <div v-if="selectList.length > 0" class="flexbox flexcenter flexbetween " style="background: rgb(248, 248, 249);border-radius: 8px;margin-bottom: 12px;padding: 8px  12px 8px 20px;height: 20px;font-size: 14px;">
                    <div class="flexbox flexcenter">
                        <div>已选<span style="color:#165DFF">&nbsp;{{selectList.length}}&nbsp;</span>项</div>
                        <div style="width: 1px;height: 12px;background:#D7DADE;margin: 0 12px"></div>
                        <div style="cursor: pointer;" @click="dialogVisibleSumbit = true,current='select'">关停</div>
                    </div>
                    <div @click="selectList = [],$refs.AccountTable.$refs.table.clearSelection()" >
                        <svg xmlns="http://www.w3.org/2000/svg" style="cursor:pointer" width="24" height="24" viewBox="0 0 24 24" fill="none"><path d="M17.2543 8.25426C17.6708 7.8377 17.6708 7.16233 17.2543 6.74577C16.8377 6.32921 16.1623 6.32921 15.7458 6.74577L12 10.4915L8.25426 6.74577C7.8377 6.32921 7.16233 6.32921 6.74577 6.74577C6.32921 7.16233 6.32921 7.8377 6.74577 8.25426L10.4915 12L6.74577 15.7458C6.32921 16.1623 6.32921 16.8377 6.74577 17.2543C7.16233 17.6708 7.8377 17.6708 8.25426 17.2543L12 13.5085L15.7458 17.2543C16.1623 17.6708 16.8377 17.6708 17.2543 17.2543C17.6708 16.8377 17.6708 16.1623 17.2543 15.7458L13.5085 12L17.2543 8.25426Z" fill="#ACB2BB"/></svg>
                    </div>
                </div>
                <custom-table :data="tableData" @selection-change="handleSelectionChange" ref="AccountTable"  v-loading="loading" height="calc(-360px   + 100vh)" :queryInfo.sync="queryInfo" :total="total" @changePage="getDataList">
                        <el-table-column
                            type="selection"
                            width="55">
                        </el-table-column>
                        <el-table-column  label="广告ID" prop="ad_id"  width="180" ></el-table-column>
                        <el-table-column  label="广告名称" prop="ad_name" width="180">
                            <template  slot-scope="scope">
                                 <el-tooltip class="item" effect="dark" :content="scope.row.ad_name" placement="top">
                                    <div style="padding: 5px;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;">{{scope.row.ad_name}}</div>
                                </el-tooltip>
                            </template>
                        </el-table-column>
                        <el-table-column  label="消耗" prop="spend" :sortable="true">
                            <template  slot-scope="scope">
                                    <div>{{scope.row.spend || '0.00'}}</div>
                            </template>
                        </el-table-column>
                        <el-table-column  label="GVM" prop="total_onsite_shopping_value">
                             <template  slot-scope="scope">
                                    <div>{{scope.row.total_onsite_shopping_value || '0.00'}}</div>
                            </template>
                        </el-table-column>
                        <el-table-column  label="ROI" prop="onsite_shopping_roas" >
                             <template  slot-scope="scope">
                                    <div>{{scope.row.onsite_shopping_roas || '0.00'}}</div>
                            </template>
                        </el-table-column>
                        <el-table-column  label="操作" > 
                             <template  slot-scope="scope">
                                     <span style="color:#F53F3F;cursor:pointer" @click="dialogVisibleSumbit = true,current='single',tableRow = scope.row"> 关停 </span>
                             </template>
                        </el-table-column>
                        

                        <!-- <el-table-column v-for="item in tableHeader" :label="item.title" :width="item.width" :sortable="item.sortable">
                            <template  slot-scope="scope">
                                <template v-if="item.customRender=='edit'">
                                     <span style="color:#F53F3F;cursor:pointer" @click="dialogVisibleSumbit = true,current='single',tableRow = scope.row"> 关停 </span>
                                </template>
                             <template>
                            <div>{{ scope.row[item.prop] }}</div>
                        </template>
                        </template >
                        </el-table-column> -->
            </custom-table>
            </div>
        </div>
        <SumbitDialog
            class="savedialog"
            width="400px"
            :dialogVisible.sync="dialogVisibleSumbit"
            sumbitColor="#F53F3F"
            sumbitText="关停"
            @onSubmit="stopFn(),dialogVisibleSumbit=false">
            <div slot="title">关停广告</div>
            <div style="color:#5C636C;margin:16px 0;">确定关停广告吗？关停后将无法在系统中开启。</div>
    </SumbitDialog>
    </el-drawer>
</template>

<script>
import CustomTable from '@/components/components/CustomTable';
import SumbitDialog from "@/components/components/SumbitDialog"
export default {
    name: "",
    data() {
        return {
            pickerOptions: {
                disabledDate(time) {
                    return time.getTime() > Date.now() - 8.64e7;
                },
            },
            loading:false,
            dialogVisible: false,
            dialogVisibleSumbit:false,
            baseInfo: {
                material_id: "",
                material_name: "",
                duration: 0,
                create_time: "",
                material_type: "",
                material: "",
            },
            tableHeader: [ {
                title: '广告ID',
                width:"",
                prop:'ad_id',
                sortable:false
            },{
                title: '广告名称',
                width:"",
                prop:'ad_name',
                sortable:false
            },{
                title: '消耗',
                width:"",
                prop:'spend',
                sortable:true,
                customRender:'spend',
            },{
                title: 'GVM',
                width:"",
                prop:'total_onsite_shopping_value',
                sortable:false,
                customRender:'total_onsite_shopping_value'
            },{
                title: 'ROI',
                width:"",
                prop:'onsite_shopping_roas',
                sortable:false,
                customRender:'onsite_shopping_roas'
            },{
                title: '操作',
                width:"",
                prop:'name',
                sortable:false,
                customRender:'edit'
            }],
            queryInfo:{
                page:1,
                limit:50,
            },
            total:0,
            tableData:[],
            copyTableData:[],
            AccountId:"",
            AccountList:[],
            date:[],
            selectList:[],
            current:"",
            tableRow:{}
        };
    },
    created() {},
    mounted() {},
    methods: {
        filterTip(event){
            console.log(event)
        },
       async stopFn(){
        this.loading= true;
        let ad_ids = {
            'single':[this.tableRow.ad_id],
            'select':this.selectList.map(e=>e.ad_id),
            'all':this.copyTableData.map(e=>e.ad_id),
        }
        const { data: res } = await this.$http.post(
            this.$tiktokUrl+"adminapi/materialv2/adStatusUpdate",{
                        'advertiser_id':this.AccountId,
                        'ad_ids': ad_ids[this.current]
                    }
            );
            if(res.code != 200){
                this.$message.error(res.msg);
            }
            if(res.code == 200){
            this.getTableList();
            this.queryInfo.page = 1
             this.$message.success('操作成功')
            }
            
        },
        handleSelectionChange(val) {
            this.selectList = val;
        },
        // 翻页获取对应数据
        getPageData(data, pageSize, pageNumber) {  
            // 计算开始索引，因为页码是从1开始的，而索引是从0开始的  
            const startIndex = (pageNumber - 1) * pageSize;  
            
            // 确保不会超出数组长度  
            const endIndex = Math.min(startIndex + pageSize, data.length);  
            
            // 使用slice方法提取数据  
            return data.slice(startIndex, endIndex);  
        } ,
        // 翻页 条数
        getDataList(row){
            this.tableData = this.getPageData(this.copyTableData, this.queryInfo.limit, this.queryInfo.page)
        },
        // 秒数转换
        secondToTimeStr(t) {
            if (!t) return;
            if (t < 60) return "00:" + ((i = t) < 10 ? "0" + i : i);
            if (t < 3600)
                return (
                    "" +
                    ((a = parseInt(t / 60)) < 10 ? "0" + a : a) +
                    ":" +
                    ((i = t % 60) < 10 ? "0" + i : i)
                );
            if (3600 <= t) {
                var a,
                    i,
                    e = parseInt(t / 3600);
                return (
                    (e < 10 ? "0" + e : e) +
                    ":" +
                    ((a = parseInt((t % 3600) / 60)) < 10 ? "0" + a : a) +
                    ":" +
                    ((i = t % 60) < 10 ? "0" + i : i)
                );
            }
        },
        // 打开加载
        opensData() {
            this.getList();
        },
    
     generateAdObjects(count) {  
        let ads = [];  
    
        for (let i = 0; i < count; i++) {  
            // 生成唯一的ad_name和ad_id（这里只是简单模拟）  
            const ad_name = i; // 添加一个随机数以模拟唯一性  
            const ad_id = `1803991082180657_${i}`; // 假设每个id都是基于某个基础id加上一个索引  
    
            // 生成其他固定的或模拟的字段  
            const spend = (Math.random() * 100).toFixed(2); // 生成一个随机的花费值  
            const total_onsite_shopping_value = (Math.random() * 1000).toFixed(2); // 生成一个随机的总购物价值  
            const onsite_shopping_roas = (parseFloat(total_onsite_shopping_value) / parseFloat(spend)).toFixed(2); // 计算ROAS  
    
            // 将对象添加到数组中  
            ads.push({  
                ad_name: ad_name,  
                ad_id: ad_id,  
                spend: spend,  
                total_onsite_shopping_value: total_onsite_shopping_value,  
                onsite_shopping_roas: onsite_shopping_roas  
            });  
        }  
    
        return ads;
    },
    // 获取table数据
    async getTableList(){
        this.loading = true;
        const { data: res } = await this.$http.post(
                this.$tiktokUrl+"adminapi/materialv2/tkAdData",{material_id:this.baseInfo.material_id,advertiser_id:this.AccountId,date:this.date}
            );
            if(res.code != 200){
                this.$message.error(res.msg);
            }
            if(res.code == 200){
                // this.total = this.generateAdObjects(150).length;
                // this.copyTableData = this.generateAdObjects(150);
                // this.tableData = this.copyTableData.slice(0, this.queryInfo.limit);
                this.total = res.data.length;
                this.copyTableData = res.data;
                this.tableData = this.copyTableData.slice(0, this.queryInfo.limit);
            }
        this.loading = false;

    },
    // 获取账户列表
    async getList(){
        this.loading = true;
        const { data: res } = await this.$http.get(
                this.$tiktokUrl+"adminapi/materialv2/tkadvList",{params:{
                    material_id:this.baseInfo.material_id
                }}
            );
            if(res.code != 200){
                this.$message.error(res.msg);
            }
            if(res.code == 200){
                this.AccountList = res.data
                this.AccountId =  res.data.length > 0 ? res.data[0].advertiser_id:"";
                this.getTableList()
            }
    },
        // 关闭重置
        closeData() {
            this.dialogVisible = false;
            this.queryInfo = {
                page: 1,
                limit: 50
            }
            this.selectList = [];
        },
    },
    components: {
        CustomTable,
        SumbitDialog
    },
};
</script>


<style scoped>
.savedialog >>> .promptDialog .el-dialog__footer{
   padding:  0 16px 16px !important;
}
/deep/ .el-pagination{
    padding: 16px;
}
.demand_box >>> .el-table th>.cell{
    padding-left: 14px !important;
}
.demand_head {
    height: 119px;
}
.ana_img {
    position: relative;
    width: 50px;
    height: 78px;
    border-radius: 4px;
    overflow: hidden;
}
.logo_img {
    display: block;
    width: 100%;
    height: 100%;
}
.ana_type {
    position: absolute;
    width: 31px;
    height: 16px;
    font-size: 12px;
    color: #fff;
    line-height: 16px;
    text-align: center;
    border-radius: 2px;
    top: 0;
    right: 0;
}
.ana_type_blue {
    background: #4475ff;
}
.ana_type_green {
    background: #00bc4b;
}
.ana_info {
    margin-left: 16px;
}
.ana_name {
    font-size: 18px;
    color: #17233d;
    line-height: 25px;
    font-weight: bold;
}
.ana_base {
    margin-top: 16px;
}
.ana_time {
    font-size: 12px;
    color: #616c85;
    height: 23px;
    line-height: 23px;
    padding: 0 8px;
    border: 1px solid #ebebeb;
    margin-right: 16px;
    border-radius: 2px;
}
.first_text {
    cursor: pointer;
}
.heder_box{
    margin-bottom: 20px;
}

.close_btn {
    font-size: 14px;
    border-radius: 8px;
    border: 1px solid #E8EAEC;
    padding: 5px 17px;
    color: #5C636C;
    background: #FBFBFC;
}
</style>

